<template>
	<view>
		<u-navbar title="收费规则" title-color="white" :title-size="35" :title-bold="true" :immersive="true"
			:background="background" :border-bottom="false"></u-navbar>
		<view class="flex-col flex-auto group_2">
			<u-select v-model="shopshow" :list="shopList" @confirm="shopconfirm"></u-select>
			<view class="flex-col relative group_3 space-y-29">
				<view class="flex-row justify-center items-center section_3 space-x-18" @click="addcash">
					<image class="image_6"
						src="https://gongxiangtaiqiu.axa2.com/taiqiu/eabdcbe5afd9a2a630fb7e9570c73680.png" />
					<text class="font_1">设置台球押金金额</text>
				</view>
				<view class="flex-row space-x-9" style="margin-left: 40px;">
					<image class="shrink-0 image_7"
						src="https://gongxiangtaiqiu.axa2.com/taiqiu/16796433429764998135.png" />
					<text class="font_1 text_6">押金金额：{{cash_money}}</text>
				</view>
				<u-modal v-model="show2" title="设置押金" confirm-text="确认添加" confirm-color="#19C865"
					:title-style="{color:'black'}" @confirm="confirmCash" :mask-close-able="true" @cancel="cancel">
					<view class="slot-content">
						<view style="display: flex; align-items: center; width: 270px; height: 72px;">
							<view>价格：</view><input class="time" v-model="cash_money" />
							<view style="margin-left: 5px;">元</view>
						</view>
					</view>
				</u-modal>
				<view class="flex-row justify-center items-center section_3 space-x-18" style="margin-top: 30px;" @click="addchesscash">
					<image class="image_6"
						src="https://gongxiangtaiqiu.axa2.com/taiqiu/eabdcbe5afd9a2a630fb7e9570c73680.png" />
					<text class="font_1">设置麻将押金金额</text>
				</view>
				<view class="flex-row space-x-9" style="margin-left: 40px;">
					<image class="shrink-0 image_7"
						src="https://gongxiangtaiqiu.axa2.com/taiqiu/16796433429764998135.png" />
					<text class="font_1 text_6">押金金额：{{chess_money}}</text>
				</view>
				<u-modal v-model="show3" title="设置押金" confirm-text="确认添加" confirm-color="#19C865"
					:title-style="{color:'black'}" @confirm="confirmchessCash" :mask-close-able="true" @cancel="cancel">
					<view class="slot-content">
						<view style="display: flex; align-items: center; width: 270px; height: 72px;">
							<view>价格：</view><input class="time" v-model="chess_money" />
							<view style="margin-left: 5px;">元</view>
						</view>
					</view>
				</u-modal>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				chess_money:'',
				background: {
					backgroundColor: '#19C865',
				},
				show: false,
				show1: false,
				show2: false,
				show3: false,
				shopshow: false,
				starttime: '',
				endtime: '',
				money: '',
				emoney: '',
				ruleList: {},
				amend_start: '',
				amend_money: '',
				amend_end: '',
				amend_emoney: '',
				id: '',
				shopList: {},
				shop_name: '',
				cash_money: '',
			};
		},
		onLoad() {
			if (uni.getStorageSync('Bshop_name') == '') {
				uni.showToast({
					icon: 'none',
					title: '请在首页选择店铺哦！'
				})
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					})
				}, 2000)
			}
			//押金获取
			this.cash()
			this.shop()
			this.rule()
		},
		methods: {

			cash() {
				this.$Api.getCashPledge({
					shopId: uni.getStorageSync('Bshop_id'),
					// type:2
				}).then(res => {
					this.cash_money = res.data.data[0].f_cash_pledge
					this.chess_money = res.data.data[1].f_cash_pledge
				})
				
			},
			//店铺选择
			shopconfirm(e) {
				this.shop_name = e[0].label
				this.shop_id = e[0].value
				uni.setStorageSync('shop_id', this.shop_id);
				uni.setStorageSync('shop_name', this.shop_name);
				this.rule()
				console.log(this.shop_id, this.shop_name);
			},
			confirmCash(e) {
				//创建押金记录
				this.$Api.createCashPledge({
					shopId: uni.getStorageSync('Bshop_id'),
					type:1,//1台球 2棋牌
					money: this.cash_money,
				}).then(res => {
					if (res.data.code == 0) {
						uni.showToast({
							icon: 'success',
							title: '添加成功'
						})
					}
					console.log(res);

				});
			},
			confirmchessCash(e) {
				//创建押金记录
				this.$Api.createCashPledge({
					shopId: uni.getStorageSync('Bshop_id'),
					type:2,
					money: this.chess_money,
				}).then(res => {
					if (res.data.code == 0) {
						uni.showToast({
							icon: 'success',
							title: '添加成功'
						})
					}
					console.log(res);

				});
			},
			// 商家店铺列表
			shop() {
				this.$Api.getMyShop({
					userId: uni.getStorageSync('userid'),
				}).then(res => {
					console.log(res.data.data, '12121212')
					let arr = res.data.data
					this.shopList = arr.map(item => {
						return {
							label: item.f_shop_name,
							value: item.id
						}
					})
					console.log(this.shopList)
				});
			},
			//根据设备获取规则
			rule() {
				this.$Api.getEqRule({
					shopId: uni.getStorageSync('Bshop_id'),
				}).then(res => {
					this.ruleList = res.data.data
					console.log(res.data.data, '规则列表')
				})
			},
			//添加设备
			addList() {
				this.$Api.eqLinkRule({
					start: this.starttime,
					end: this.endtime,
					money: this.money,
					emoney: this.emoney,
					shopId: uni.getStorageSync('Bshop_id'),
				}).then(res => {
					this.rule()
					console.log(res.data.data, 'addList')
				});
			},
			//修改设备
			amendList() {
				console.log(this.money, '提交')
				this.$Api.eqLinkRule({
					start: this.amend_start,
					end: this.amend_end,
					money: this.amend_money,
					emoney: this.amend_emoney,
					shopId: uni.getStorageSync('Bshop_id'),
					id: this.id
				}).then(res => {
					this.rule()
				});
			},
			//添加按钮
			confirm(e) {
				console.log(this.money, '添加时候的金额')
				this.$Api.getUnitPrice({
					money: this.money,
				}).then(res => {
					this.emoney = res.data.data
					this.addList()
				});
			},
			//删除按钮
			cancel() {
				this.$Api.delEqRule({
					id: this.id,
				}).then(res => {
					this.rule()
				});
			},
			//修改按钮
			amendconfirm(e) {
				console.log(this.amend_money, '修改时候的金额')
				this.$Api.getUnitPrice({
					money: this.amend_money,
				}).then(res => {
					this.amend_emoney = res.data.data
					this.amendList()

				});
			},
			//改规则显示弹窗
			rules(item) {
				console.log(item)
				this.amend_start = item.f_start
				this.amend_money = item.f_money
				this.amend_end = item.f_end
				this.id = item.id
				this.show1 = true;
			},
			//添加显示弹窗
			addrule() {
				this.show = true;
			},
			//添加显示押金弹窗
			addcash() {
				this.show2 = true;
			},
			addchesscash() {
				this.show3 = true;
			},

		},
	};
</script>

<style>
	.time {
		border: 1px solid #dddddd;
		border-radius: 8rpx;
		width: 198rpx;
		height: 80rpx;
		padding-left: 20rpx;
	}

	.slot-content {
		font-size: 28rpx;
		color: $u-content-color;
		padding-left: 30rpx;
	}

	/************************************************************
	** 请将全局样式拷贝到项目的全局 CSS 文件或者当前页面的顶部 **
	** 否则页面将无法正常显示                                  **
	************************************************************/

	html {
		font-size: 16px;
	}

	body {
		margin: 0;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
			'Droid Sans', 'Helvetica Neue', 'Microsoft Yahei', sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	view,
	image,
	text {
		box-sizing: border-box;
		flex-shrink: 0;
	}

	#app {
		width: 100vw;
		height: 100vh;
	}

	.flex-row {
		display: flex;
		flex-direction: row;
	}

	.flex-col {
		display: flex;
		flex-direction: column;
	}

	.justify-start {
		justify-content: flex-start;
	}

	.justify-end {
		justify-content: flex-end;
	}

	.justify-center {
		justify-content: center;
	}

	.justify-between {
		justify-content: space-between;
	}

	.justify-around {
		justify-content: space-around;
	}

	.justify-evenly {
		justify-content: space-evenly;
	}

	.items-start {
		align-items: flex-start;
	}

	.items-end {
		align-items: flex-end;
	}

	.items-center {
		align-items: center;
	}

	.items-baseline {
		align-items: baseline;
	}

	.items-stretch {
		align-items: stretch;
	}

	.self-start {
		align-self: flex-start;
	}

	.self-end {
		align-self: flex-end;
	}

	.self-center {
		align-self: center;
	}

	.self-baseline {
		align-self: baseline;
	}

	.self-stretch {
		align-self: stretch;
	}

	.flex-1 {
		flex: 1 1 0%;
	}

	.flex-auto {
		flex: 1 1 auto;
	}

	.grow {
		flex-grow: 1;
	}

	.grow-0 {
		flex-grow: 0;
	}

	.shrink {
		flex-shrink: 1;
	}

	.shrink-0 {
		flex-shrink: 0;
	}

	.relative {
		position: relative;
	}

	.group_2 {
		padding-bottom: 243rpx;
		overflow-y: auto;
		margin-top: 180rpx;
	}

	.section_2 {
		padding: 33rpx 31rpx 76rpx;
		background-color: #19c865;
	}

	.text_2 {
		color: #ffffff;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 700;
		line-height: 31rpx;
	}

	.space-x-7>view:not(:first-child),
	.space-x-7>text:not(:first-child),
	.space-x-7>image:not(:first-child) {
		margin-left: 7rpx;
	}

	.text_3 {
		color: #ffffff;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 700;
		line-height: 23rpx;
	}

	.image_5 {
		width: 24rpx;
		height: 22rpx;
	}

	.text-wrapper {
		margin-top: -37rpx;
		padding: 43rpx 0 55rpx;
		background-color: #f3f3f5;
		border-radius: 24rpx 24rpx 0px 0px;
	}

	.font_1 {
		font-size: 28rpx;
		font-family: PingFang SC;
		line-height: 26rpx;
		font-weight: 500;
		color: #222222;
	}

	.text_4 {
		margin-left: 33rpx;
		font-weight: 700;
		line-height: 27rpx;
	}

	.group_3 {
		margin-top: -21rpx;
		padding: 0 30rpx;
	}

	.space-y-29>view:not(:first-child),
	.space-y-29>text:not(:first-child),
	.space-y-29>image:not(:first-child) {
		margin-top: 29rpx;
	}

	.section_3 {
		background-color: #ffffff;
		border-radius: 16rpx;
		width: 100%;
		height: 40px;
		margin-top: 30px;
		/* 	padding: 32rpx 0;
		background-color: #ffffff;
		border-radius: 16rpx; */
	}

	.space-x-18>view:not(:first-child),
	.space-x-18>text:not(:first-child),
	.space-x-18>image:not(:first-child) {
		margin-left: 18rpx;
	}

	.image_6 {
		width: 44rpx;
		height: 44rpx;
	}

	.section_4 {
		padding: 38rpx 0 51rpx 29rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.equal-division {
		width: 486rpx;
	}

	.space-x-9>view:not(:first-child),
	.space-x-9>text:not(:first-child),
	.space-x-9>image:not(:first-child) {
		margin-left: 9rpx;
	}

	.image_7 {
		width: 30rpx;
		height: 30rpx;
	}

	.text_5 {
		line-height: 27rpx;
	}

	.text_6 {
		line-height: 27rpx;
	}

	.group_4 {
		margin-top: 38rpx;
		padding: 40rpx 76rpx;
		border-top: solid 1rpx #f3f3f5;
		border-bottom: solid 1rpx #f3f3f5;
	}

	.font_2 {
		font-size: 28rpx;
		font-family: PingFang SC;
		line-height: 22rpx;
		font-weight: 500;
		color: #222222;
	}

	.text_7 {
		margin-right: 33rpx;
	}

	.group_5 {
		padding: 40rpx 78rpx;
		border-bottom: solid 1rpx #f3f3f5;
	}

	.text_8 {
		margin-right: 31rpx;
	}

	.text_9 {
		margin-right: 27rpx;
	}

	.text_10 {
		margin-right: 27rpx;
	}

	.text_11 {
		margin-right: 27rpx;
	}

	.text_12 {
		margin-right: 29rpx;
	}

	.group_6 {
		padding: 40rpx 78rpx 0;
	}

	.text_13 {
		margin-right: 32rpx;
	}
</style>
